﻿import QtQuick 2.12
import QtQuick.Controls 2.12
import "../style.js"  as AdControlStyle

RadioButton {
    id: controlRoot

    //指示器样式
    property  color  indicatorBgCheckedColor:"#409EFF"                     //指示器背景三态颜色
    property  color  indicatorBgUncheckedColor:"white"
    property  color  indicatorBgDisabledColor:"white"
    property  color  indicatorBorderCheckedColor:indicatorBgCheckedColor   //指示器边框三态颜色
    property  color  indicatorBorderUncheckedColor:"#C0C0C0"
    property  color  indicatorBorderDisabledColor:"#C0C0C0"
    property  color  indicatorDotEnableColor:"white"                             //指示器圆点颜色
    property  color  indicatorDotDisabledColor:indicatorBorderDisabledColor

    //文本样式
    property  color  buttonTextCheckedColor:indicatorBgCheckedColor           //文本三态颜色
    property  color  buttonTextUnCheckedColor:"black"
    property  color  buttonTextDisabledColor:"#C0C0C0"

    height: 30
    font.pixelSize: controlRoot.height*0.7
    spacing: 10

    indicator: Rectangle {
        id:indicatorBorder
        width: controlRoot.height
        height: width
        x: controlRoot.leftPadding
        y: controlRoot.height / 2 - height / 2
        radius: height/2
        color:controlRoot.enabled?(controlRoot.checked?indicatorBgCheckedColor:indicatorBgUncheckedColor):indicatorBgDisabledColor
        border.color: controlRoot.enabled?(controlRoot.checked?indicatorBorderCheckedColor:indicatorBorderUncheckedColor):indicatorBorderDisabledColor

        Rectangle {
            id:indicatorDot
            width: parent.height*0.4
            height: width
            anchors.centerIn: parent
            radius: height/2
            color: controlRoot.enabled?indicatorDotEnableColor:indicatorDotDisabledColor
            visible: controlRoot.checked

            onVisibleChanged: {
                if(visible){
                    animation.start()
                }
            }

            PropertyAnimation{
                id:animation
                target: indicatorDot
                property: "width"
                from:0
                to: indicatorBorder.height*0.4
                duration: 300
            }
        }
    }

    contentItem: Text {
        text: controlRoot.text
        font: controlRoot.font
        color:controlRoot.enabled?(controlRoot.checked?buttonTextCheckedColor:buttonTextUnCheckedColor):buttonTextDisabledColor
        verticalAlignment: Text.AlignVCenter
        leftPadding: controlRoot.indicator.width + controlRoot.spacing
    }
}
